<html>
    <head>
        <title>TODO supply a title</title>
        <script src="/ukkepuk/source/html/scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            
            $(document).ready(function() {
                 generateCalendar();
            });
            
            //TODO IMPLEMENT WORKFLOW
            //empty: 
            //- click, use default hours for the child; color green
            //- click again, popup opens where you cna change the hours and add other timeframe on the same date
            //  --> before school and after school but not during the day.
            
            
            function generateCalendar(){
                //TODO from php, generate array of days reserved for this kid
                
                var month=3; //jan is 0
                var year=2012;
            
                var d = new Date(year, month, 1);
                var weekday = d.getDay();
                var daysArrayLength = getDaysInMonthYear(month, year) + weekday;
                alert("day: " + d + " --- " + weekday + " --- " + daysArrayLength);
               
            
                var tableString = "<table><tr>";
                //generate empty cells
                for(var i = 0; i < weekday; i++){
                    tableString += "<td></td>";
                }
                //build rest of calendar
                for(var i = weekday+1; i <= daysArrayLength; i++){
                    tableString += "<td id=\"day_"+year+""+month+""+i+"\" class=\"calendarday\">"+(i-weekday)+"</td>";
                    if(i%7==0)
                        tableString += "</tr><tr>";
                }
                //build end of month
                
                //TODO: function doesn't work'
                for(var i = 0; i < weekday%7 ; i++){
                    tableString += "<td></td>";
                }
                
                tableString += "</tr></table>";
                
                $(tableString).appendTo("#calendar");
                
                //TODO: once append, write on click for class calendarday
            }
            
            
            
            function getDaysInMonthYear(month, year){
                return 32 - new Date(year, month, 32).getDate();

            }
        </script>
    </head>
    <body>
        <div>TODO write content</div>
        <div id="calendar"></div>
    </body>
</html>
